<!--
 * @Descripttion: 
 * @Author: yuxi
 * @Date: 2022-09-15 14:58:04
 * @LastEditors: yuxi
 * @LastEditTime: 2023-03-11 20:24:11
-->
<template>
  <div class="map-container">
    <MiningMap
      :center="center"
      :zoom="zoom"
      :useContextMenu="true"
      :customContextMenus="customContextMenus"
      @ready="mapReady"
      @selected="handleSelected"
    >
      <MiningTiandituLayer :ak="key"></MiningTiandituLayer>
      <MiningVectorLayer :featureStyle="style">
        <MiningLineString :feature="feature"></MiningLineString>
        <MiningPoint
          v-for="(feature, fi) in points"
          :key="fi"
          :feature="feature"
        ></MiningPoint>
      </MiningVectorLayer>
    </MiningMap>
  </div>
</template>

<script>
import MiningMap from 'mining-map/Map'
import MiningTiandituLayer from 'mining-map/Layers/TiandituLayer'
import MiningVectorLayer from 'mining-map/Layers/VectorLayer'
import MiningLineString from 'mining-map/Features/LineString';
import MiningPoint from 'mining-map/Features/Point';
import { TiandituKey, CityCoordinates } from '@/config/config.js';

import Feature from 'ol/Feature';
import LineString from 'ol/geom/LineString';
import { Style, Stroke as StrokeStyle, Icon } from 'ol/style';

import GeoJSON from 'ol/format/GeoJSON';
import { exec } from '@/apis/geo'
import marker from '@/assets/images/light.png'

export default {
  name: 'SplitLineString',
  title: '线要素提取关键点',
  parentTitle: '业务组件',
  components: {
    MiningMap,
    MiningTiandituLayer,
    MiningVectorLayer,
    MiningLineString,
    MiningPoint
  },
  data () {
    const feature = new Feature({
      geometry: new LineString([
        CityCoordinates.BeiJing,
        CityCoordinates.TianJin,
        CityCoordinates.ShangHai,
        CityCoordinates.XiAn
      ]),
      name: 'AirLine',
    });
    const style = new Style({
      stroke: new StrokeStyle({
        color: 'green',
        width: 2,
      }),
      image: new Icon({
        anchor: [0.5, 1],
        anchorXUnits: 'fraction',
        anchorYUnits: 'fraction',
        scale: 0.2,
        src: marker,
      })
    })
    return {
      feature,
      style,
      center: [117.730311, 35.698681],
      zoom: 5,
      key: TiandituKey,
      map: null,
      activeFeature: null,
      points: []
    }
  },
  computed: {
    customContextMenus () {
      return this.activeFeature ? [{
        name: '分割选中折线',
        handler: this.handleSplit
      }] : []
    }
  },
  methods: {
    mapReady (arg) {
      console.log(arg)
      this.map = arg.map
    },
     
    // 打断折线
    handleSplit (evt) {
      console.log('handleSplit', evt)
      if (evt.selected && evt.selected.length > 0) {
        let geom = evt.selected[0].feature.getGeometry()
        // console.log(geom)
        this.points = []
        exec({
          type: 'SplitLine',
          params: {
            geom: new GeoJSON().writeGeometry(geom),
            total: 5
          }
        }).then(res => {
          if (res.code === 0) {
            let points = this.points = res.data.map(f => {
              return new GeoJSON().readFeature(f)
            })
            console.log(points)
          }
        })
      }
    },
    // 获取激活要素
    handleSelected (active, unActive) {
      if (active) {
        this.activeFeature = active
        // 高亮
        this.activeFeature.feature.setStyle(new Style({
          stroke: new StrokeStyle({
            color: 'red',
            width: 2,
          }),
        }))
      } else if (unActive) {
        // 恢复样式
        this.activeFeature.feature.setStyle(this.style)
        this.activeFeature = null
      }
    }
  }

}
</script>

<style>
body,
html {
  padding: 0;
  margin: 0;
}

.map-container {
  width: 100%;
  height: 100vh;
}
</style>